리액트 동시성 모드

❓질문

리액트의 동시성 모드에 대해서 설명해주세요.

💡 조사하기전 내가 알고 있던 내용

처음 들어보는 단어라 바로 답변하지 못했습니다.

🏫 정리한 내용

리액트의 동시성 모드에 대해서 설명하겠습니다

리액트의 동시성 모드(Concurrent Mode)는 여러 작업을 비동기적으로 동시에 처리하면서도 중간에 더 중요한 작업이 들어오면 우선순위를 바꿔서 그 작업을 먼저 처리 하는 기능을 의미합니다.

동시성 모드 라는 단어를 많이 접해보지 않았어서 리액트의 동시성이나 동시성 렌더링에 대해 설명하라했으면 대답 했을것 같다.

예전의 리액트는 스택 구조로 이루어져있었지만 현대의 리액트는 파이버 객체를 활용한 구조로 여러가지의 일을 동시에 처리하면서 우선순위를 두고 언제든지 잠시 대기를 시켜뒀다가 다시 실행하는등으로 중요한 작업을 먼저 처리할 수 있게 됐습니다.

그렇다면 동시성을 활용한 기능에는 어떤것이 있을까요?
첫번째로 startTransition 이란 기능을 이용하면 특정 상태 업데이트를 "덜 중요한 작업"으로 분류해서, 사용자가 클릭하거나 입력하는 반응 같은 중요한 업데이트가 우선적으로 처리 됩니다.

	startTransition(() => {
		상태변경함수(값)
	})

또 useDeferredValue라는 훅을 사용하면 값의 업데이트를 잠깐 지연 시킬 수 있어서, 사용자가 뭔가 빠르게 입력할 때마다 리렌더링 되지 않게 최적화할 수 있습니다.

const [query, setQuery] = useState('');
  // query의 지연된 버전 생성
const deferredQuery = useDeferredValue(query);

디바운싱이랑 드는 예가 좀 비슷한거 같아서 찾아보니
useDeferredValue는 시스템에 부하도를 바탕으로 이전 값을 기억하고 백그라운드에서 새 작업을 시작하는 반면 디바운싱은 외부 타이머의 도움으로 고정된 시간내에서 무조건 지연이 일어나는 구조라 비슷하지만 아예 결이 다른 것같다.

결국 사용자 경험이 주가 되는 상태 업데이트의 우선순위를 정하는 기능들이라 무차별 적으로 사용하면 오히려 사용자 경험을 망칠수도 있을것이고 필요한 부분에만 사용하는것이 좋을 것 같다.